自動勉強会 vol.2 共同編集・Undo回
https://gyazo.com/853ed93d99b82ba580c8f4be9ab87f3c
参加方法
複雑GUI会のDiscordに入っておいてください。
聞き専の方は入ったらミュートに設定してください
Scrapboxの登録リンクを踏んで編集可能にします
課題
共同編集テキストエディタ? (大変そう)
何でもいいので逆操作コマンド型とスナップショット型を軽く実装してみるとか？D.icon
目次
共同編集・アンドゥ（CRDTとか）seanchas_t.iconmiyamonz.iconhashrock.iconshokai.iconkoba789.iconjokester.iconmiyanokomiya.iconmactkg.iconnagayama.icondaiiz.iconD.iconobuchiyuki.icon
Undo
逆操作コマンド、順操作側を冪等にする？
操作がstoreへのmutation的なときに、冪等にしておくとちょっと便利なパターンがある（後から一発でアンドゥしたい「オブジェクトの移動」なんかをまとめられるけど小手先のテクニックかも）D.icon
更新操作自体を全体的に冪等にしたい派miyanokomiya.icon
テキスト編集のアンドゥ
JSON構造のundo
jsondiffpatchの生成したdiff見ると、base変わった場合簡単に対応しなくなりそう.. と感じた jokester.icon
プロパティの書き込みを監視してクライアントでUndo登録してる obuchiyuki.icon
ベクターのアンドゥ
JSONのアンドゥ、任意のオブジェクトのアンドゥとして考えられる
ラスターのアンドゥbaku89.icon
画素データ自体を保存するのか、それともスナップショットを起点に編集パラメーター（ブラシ位置等）を逐次保存するのか
ブラシのパラメータとストロークを両方保存しておけば画素データまるごと持たなくてもいいよね
ストローク保持してるなら、ブラシのパラメータ変えて再度描けるよね
スナップショットと差分の間の子
undoした時はスナップショットからの差分を全部再生しないといけない...重くならない？
どれくらいならセーフ？？
昔の絵茶だと、最初から全再生する実装もあったらしい...undoに1分待つとか すごい時代だ...miyanokomiya.icon
共同編集 + Undo
MagicalDraw 自分の操作がサーバーに送信される前ならアンドゥできる
minordaimyo作のお絵描きチャット"えんぴつチャット"でのundo(スナップショット)
めちゃくちゃズームできる。すごいyuneco.icon
描画開始時刻以降に、描画範囲と重なる別の描画が存在するかどうかを調べる。なければundo
できないものの割り切り
キャンバス全域に斜めに線を引くと他の人のundoできなくなったりする？yuneco.icon
yes。でも、お絵かきチャットはみんな「自分の場所」で描くので、矩形領域で衝突判定するのは合理的
共同編集Undoは運用で回避が大事miyanokomiya.icon
領域の衝突判定は総当たりで十分
CRDTならサーバに送信したあとでもundoできる?seanchas_t.icon
関係ありそうだけど、英語だからちゃんと中身見れてない... なURL mactkg.icon
automergeの5000倍早い実装を書いたと書いてある
diamond-types からリンクされている
The Braid Protocol is an extension to HTTP that generalizes it from a state transfer to a state synchronization protocol.
Braid adds these features to HTTP:
1. Versioning to HTTP resources
2. Subscriptions to GET requests
3. Patches to Range Requests
4. Merge-Types to specify OT or CRDT behavior
Undo+Redoの永続化
下位互換がとても辛そうmiyanokomiya.iconD.icon
成果物そのものに対するマイグレーション処理と同じように、コマンドに対するマイグレーション処理とかも実装しないと……（面倒）D.icon
オブジェクト選択をUndo対象にするか否か
しない派だったけどblenderがする派で意外と便利だったから鞍替えしたmiyanokomiya.icon
Blender、3Dカーソルの位置はUndo対象にならないのよね……（テキストの共同編集でもカーソルは各個人が持ってるのを見ながら）
選択は個々人の状態なので共同編集と組み合わせるのは難しいかもしれない
Figmaがする派だけど、場合によってはCtrl+Zを何回も押さないと戻せないのが大変…seanchas_t.icon
グループ内の要素を選択するために何度もクリックして選択を潜っていく事があるので
RDBMSのスナップショットとトランザクションログの話も一回しっかり勉強しないとなあ……
ゲームのリプレイでも精度が確保できないから無敵にするみたいな話がTLで流れてた
作ったもの紹介コーナー
URLとスクリーンショットを張っていってください
https://gyazo.com/d310baa63e5907cc811627db56a0bfb6
昔作ったオンラインマインドマップの共同編集＆UNDO
nodeごとのsnapshot
復帰不能な競合あるか判定して無理そうなら履歴クリア
ツリーの開閉も複数クライアントで同期されている
(中国語) あるサイトのUserScriptとして書いたテーブルエディター jokester.icon
snapshot式作りで（完全線形な）undoがあった
https://gyazo.com/c68eed178fd44da32447bb62d3dde8e6
自作のお絵描きチャット"えんぴつチャット"。多人数でのUndo/Redoに対応。
https://gyazo.com/9310eb9fa8903b5d0344728e7d37a87f
領域ベースUNDOがラスタ特有という感じで面白いmiyanokomiya.icon
差分ベースの共同編集&Undo実装 obuchiyuki.icon
ObjectのProperty毎にクライアントでUndoを記録
ModelのPropertyが変更されるとUndo記録する仕組みを持っている
ObjectがなくなったらUndoを破棄
ドラッグなんかの連続処理は終了時にまとめてCommit
https://gyazo.com/c422a9ad263c7dbacee5be518cb9dfeb
モデルのプロパティの変更を監視してそれぞれでアンドゥを構築
VS Code custom editor で undo / redoseanchas_t.icon
操作が終わったタイミングでJSONを全dumpするだけの超雑実装…
extension側と相互通信
extension側にアンドゥのデータを持っておく
別tabもundoできる
Live Shareで共同編集できるかは未検証